import React from 'react';
import { Text, TouchableHighlight, View } from 'react-native';
import Modal from '../modal/ModalView';
import PopupMixin from './PopupMixin';

const getModal = (props: any, visible: any, { getContent, hide, onDismiss, onOk }: any) => {
  const { styles, title, okText, dismissText } = props;

  const titleEl = typeof title === 'string' ? <Text style={[styles.title]}>{title}</Text> : title;
  const okEl = typeof okText === 'string' ? <Text style={[styles.actionText, styles.okText]}>{okText}</Text> : okText;
  const dismissEl =
    typeof dismissText === 'string' ? <Text style={[styles.actionText, styles.dismissText]}>{dismissText}</Text> : dismissText;

  return (
    <Modal animationType='slide-up' wrapStyle={styles.modal} style={styles.container} visible={visible} onClose={hide}>
      <View style={[styles.header]}>
        <TouchableHighlight
          onPress={onDismiss}
          style={[styles.headerItem]}
          activeOpacity={props.actionTextActiveOpacity}
          underlayColor={props.actionTextUnderlayColor}>
          {dismissEl}
        </TouchableHighlight>
        <View style={[styles.headerItem]}>{titleEl}</View>
        <TouchableHighlight
          onPress={onOk}
          style={[styles.headerItem]}
          activeOpacity={props.actionTextActiveOpacity}
          underlayColor={props.actionTextUnderlayColor}>
          {okEl}
        </TouchableHighlight>
      </View>
      {getContent()}
    </Modal>
  );
};

export default PopupMixin(getModal, {
  actionTextUnderlayColor: '#ddd',
  actionTextActiveOpacity: 1,
  triggerType: 'onPress',
  styles: {},
  WrapComponent: View as any,
});
